<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
const router = useRouter()
import { ref } from 'vue'
import { useCartStore } from '@/stores/cart'
const userStore = useUserStore()
const cartStore = useCartStore()
//是否在登录中
const isLogin = ref(false)
const ruleForm = ref({ name: '', pass: '' })
const ruleFormRef = ref()
const rules = ref({
  name: [
    { required: true, message: '请输入账户名', trigger: 'blur' },
    { min: 5, message: '用户名不少于5位', trigger: 'blur' }
  ],
  pass: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码不少于6位', trigger: 'blur' }
  ]
})
const handleLogin = async (formEl) => {
  isLogin.value = true
  if (!formEl) {
    isLogin.value = false
    return
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('提交')
      userStore.getUser(ruleForm.value.name, ruleForm.value.pass)
      console.log(userStore.userInfo)
      //合并购物车操作
      cartStore.merge()
      //跳转主页
      router.replace('/')
      isLogin.value = false
    } else {
      ElMessage.error('用户名或密码错误')
      isLogin.value = false
      console.log('失败', fields)
    }
  })
}
</script>
<template>
  <div class="form_box">
    <div class="form">
      <h3 style="font-family: '清松'; text-align: center">登录界面</h3>
      <el-form
        label-position="right"
        label-width="120px"
        style="margin-right: 100px"
        size="large"
        :model="ruleForm"
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item label="账户名" prop="name">
          <el-input
            placeholder="请输入账户名"
            v-model="ruleForm.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="ruleForm.pass"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="!islogin"
            type="primary"
            class="btn_form"
            @click="handleLogin(ruleFormRef)"
            >登录</el-button
          >
          <el-button
            v-else
            type="primary"
            class="btn_form"
            @click="handleLogin(ruleFormRef)"
            >登录中</el-button
          >
        </el-form-item>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-left: 100px;
          "
        >
          <el-link style="font-family: '像素字体'" href="/">返回首页</el-link>
          <el-link style="font-family: '像素字体'" href="/register"
            >切换注册</el-link
          >
        </div>
      </el-form>
      <el-image
        src="/assets/LOGO.png"
        style="width: 500px; height: 150px; margin-left: 20px"
      ></el-image>
    </div>
  </div>
</template>
<style scoped lang="scss">
.btn_form {
  font-size: 20px;
  margin: 0 auto;
  font-family: '加油鸭';
}
.form_box {
  margin-top: 50px;
  width: 100%;
  .form {
    padding: 0 30px;
  }
}
</style>
